<template>
	<view>
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar :title="title" @leftClick="leftClick" :autoBack="false" :leftIconColor="whiteColor"
			:bgColor="blueColor" class="navBar" :leftIconSize="leftIconSize" :titleStyle="titleStyle"
			:placeholder="true">
			<view class="navbar-right" v-if="rightIcon" slot="right" @click="rightClick">
				<view class="right-view">
					<image :src="rightIcon" class="rightIcon" />
					<view class="new-tips" />
				</view>
			</view>
			<view class="navbar-right" v-if="rightText" slot="right" @click="rightClick">
				<text class="right-text">{{rightText}} </text>
			</view>
		</u-navbar>
		<view class="placeholder" />
	</view>
</template>

<script>
	import util from "@/utils/util"
	import color from "@/common/color"
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			isBack: {
				type: Boolean,
				default: true
			},
			//右边文本
			rightText: {
				type: String,
				default: ''
			},
			//右边图标
			rightIcon: {
				type: String,
				default: ''
			},
			newTips: {
				type: Boolean,
				default: false
			},
	

		},
		data() {
			return {
				titleStyle: {
					color: color.white,
					fontSize: '32rpx'
				},
				whiteColor: color.white,
				blueColor: color.blue,
				leftIconSize: 20
			}
		},
		created() {
			if (!this.isBack) {
				this.leftIconSize = 0;
			}

		},
		methods: {
			/**
			 * 返回
			 */
			leftClick() {
				if (this.isBack) {
					//this.$emit('back');
					util.navigateBack();
				}
			},
			/**
			 * 右侧点击
			 */
			rightClick() {

				if (this.rightText || this.rightIcon) {
					this.$emit('rightAreaClick');
				}
			}

		},
	}
</script>
<style lang="scss">
	.navBar {}

	.rightIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.right-view {
		display: flex;
	}

	.right-text {
		color: $uni-color-white;
		font-size: 32rpx;
	}

	.new-tips {
		width: 10rpx;
		height: 10rpx;
		background-color: red;
		border-radius: 10rpx;
		position: relative;
		right: 10rpx;
		top: 5rpx;
	}

	.placeholder {
		/*#ifdef APP-PLUS*/
		height: 0px
			/*#endif*/

	}
</style>
